<!-- 设备管理-设备运行-设备运行记录查看页面 -->
<template>
  <div v-show="!isMain && isView" class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail">
      <px-button style="margin: 16px 0 24px" type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
      <div class="view-equip-title">设备信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">科室</div>
            <div class="text">{{ formValue.classNameDesc || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">系统</div>
            <div class="text">{{ formValue.systemName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">设备总称</div>
            <div class="text">{{ formValue.categoryName || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">设备类型</div>
            <div class="text">{{ formValue.typeName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">设备型号</div>
            <div class="text">{{ formValue.modelName || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">设备编号</div>
            <div class="text">{{ formValue.eqpId || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">设备名称</div>
            <div class="text">{{ formValue.eqpName || "-" }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">设备运行状态</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">设备运行状态</div>
            <div class="text">{{ formValue.eqpRunStatusValue || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">状态原因</div>
            <div class="text">{{ formValue.downCauseName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">状态类型</div>
            <div class="text">{{ formValue.downTypeName || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">状态开始时间</div>
            <div class="text">{{ formValue.startTime || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">状态结束时间</div>
            <div class="text">{{ formValue.endTime || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">状态时长</div>
            <div class="text">{{ formValue.runTimes || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">详细原因</div>
            <div class="text">{{ formValue.remark || "-" }}</div>
          </div>
        </div>
      </div>
    </px-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";

// 父级传过来的值
const emits = defineEmits(["backMainPage"]);
const props = defineProps(["isMain", "isView", "rowData"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);

const formValue = ref({
  classNameDesc: "",
  systemName: "",
  categoryName: "",
  typeName: "",
  modelName: "",
  eqpId: "",
  eqpName: "",
  eqpRunStatusValue: "",
  startTime: "",
  endTime: "",
  runTimes: "",
  downCauseName: "",
  downTypeName: ""
});

// 监视isMain和isView值
watch(isMain, val => {
  if (!val && props.isView) {
    formValue.value = JSON.parse(JSON.stringify(props.rowData));
  } else {
    formValue.value = {};
  }
});
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
  emits("queryTable");
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
</style>
